{% include 'admin/header.html' %}
<script type="text/javascript">
    changeTab('在线签到');
    $(function () {
        var ds = null;
        var clock = document.querySelector('.clock > span');
        (function setClock() {
            var now = new Date();
            clock.innerHTML = now.getFullYear() + '年' + now.getMonth() + "月" + now.getDate() + "日 "
                + now.toTimeString().split(' ')[0];
            window.setTimeout(setClock, 1000);
        })();

        (function Auto_Flush() {
            if ('{{ info.need }}' === 'True') {
                ds = window.setInterval(function () {
                    flush_qr();
                }, {{ auto_flush }});
            }
        })();

        $('#flush').click(function () {
            flush_qr();
        });

        function flush_qr() {
            $.post('/admin/flush_img', function (data) {
{#                console.log(data);#}
                if (data.status) {
                    $('.thumbnail img').attr('src', data.img_url);
                    if (!data.need) {
                        var hm = '<div class="thumbnail">\n' +
                            '    <div class="caption text-center">\n' +
                            '        <div style="font-size: 20px;" class="alert alert-info">' +
                            '           今日课程：<span  id="today_k">'+$("#today_k").html()+'</span>' +
                            '        </div>\n' +
                            '        <h3 class="text-center">签到已经结束！</h3>\n' +
                            '    </div>\n' +
                            '</div>';
                        $('#check_').html(hm);
                        window.clearInterval(ds);
                    }
                }
            });
        }
    });
</script>
<style>
    .clock > span {
        display: inline-block;
        font-size: 12px;
        font-weight: bold;
        background: #14959b;
        padding: 5px;
        border: 1px solid #333;
        border-radius: 5px;
        margin: 14px 8px;
        color: #fff;
    }
</style>
<div class="online-xcontent">
    <div>
        <div class="col-lg-12 col-xs-12">
            <h4><span class="fa fa-hand-o-right"></span> 在线签到</h4>
            <div class="clock pull-right">
                <span></span>
            </div>
        </div>
        <div>
            <div id="check_" class="col-lg-12 col-xs-12">
                {% if info.is_study %}
                <div class="thumbnail">
                    <img src="{{ info.img_url }}" alt="{{ qd_url }}">
                    <div class="caption">
                        <div class="clearfix">
                            <h4 class="pull-left">
                                <span id="today_k" style="font-size: 18px;" class="label label-primary">自习签到</span>
                            </h4>
                            <button id="flush" class="btn btn-success pull-right">刷新</button>
                        </div>
                    </div>
                </div>
                {% elif info.k_has %}
                {% if info.need %}
                <div class="thumbnail">
                    <img src="{{ info.img_url }}" alt="{{ qd_url }}">
                    <div class="caption">
                        <div class="clearfix">
                            <h4 class="pull-left">
                                今日课程：<span id="today_k" class="label label-info">{{ info.clazz.k_name }}</span>
                            </h4>
                            <button id="flush" class="btn btn-success pull-right">刷新</button>
                        </div>
                    </div>
                </div>
                {% else %}
                <div class="thumbnail">
                    <div class="caption text-center">
                        <div style="font-size: 20px;"
                             class="alert alert-info">今日课程：{{ info.clazz.k_name }}</div>
                        <h3 class="text-center">该时间段不能签到</h3>
                    </div>
                </div>
                {% endif %}
                {% else %}
                <div class="thumbnail">
                    <div class="caption">
                        <h3 class="text-center">无签到事项</h3>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

{% include 'admin/footer.html' %}
